<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import * as _ from 'lodash-es'
import { useGameStore } from '@/stores/modules/game'
import { storageLocal } from '@pureadmin/utils'
import { getComputeGroup, cleanSpotChefs } from './compute'
import ShowTable from './ShowTable.vue'
import { Hourglass } from '@vicons/ionicons5'

import type { IChefAndCollect } from './compute'

interface FormItem {
  name: string
  width: number
  options: {
    label: string
    value: number
  }[]
  skill: number
  checked: boolean
}

const PAGE_KEY = 'Caiyuan'
const spotGroup = ref<Record<string, IChefAndCollect[]>>({})
const formItem = ref<FormItem[]>(
  useGameStore().maps.map((spot) => {
    const { name, materials } = spot
    return {
      name,
      width: 160,
      options: materials.map((m) => ({
        label: `${m.name} 👉 ${m.skill}`,
        value: m.skill,
      })),
      skill: materials.at(-1)?.skill ?? 0,
      checked: true,
    }
  }),
)

onBeforeMount(() => {
  formItemSort()
})

/** 拖拽卡片结束后 */
function onDragEnd() {
  console.log(_.cloneDeep(formItem.value))
}

/** 排序 */
function formItemSort() {
  formItem.value.sort((a, b) => Number(b.skill) - Number(a.skill))
}

/** 全选 */
function formItemSelectAll() {
  let checked = true
  if (formItem.value.every((s) => s.checked)) {
    checked = false
  }
  formItem.value.map((item) => (item.checked = checked))
}

/** 计算 */
function getGroup() {
  const spots: Record<string, IChefAndCollect[]> = storageLocal().getItem(PAGE_KEY) ?? {}

  formItem.value
    .filter((f) => f.checked)
    .forEach((item) => {
      const group = getComputeGroup(item.name, item.skill)
      if (group) {
        spots[item.name] = group
      }
    })

  spotGroup.value = spots
  console.log(spots)
}

/** 清空选中的厨师 */
function clearAll() {
  formItem.value.forEach((item) => {
    cleanSpotChefs(item.name)
    spotGroup.value[item.name] = []
  })
}
</script>

<template>
  <n-flex vertical :size="24">
    <n-alert title="菜园探索中，勿扰！！" type="warning">
      <template #icon>
        <n-icon>
          <Hourglass />
        </n-icon>
      </template>
    </n-alert>
    <n-flex>
      <n-button @click="formItemSort">排序</n-button>
      <n-button @click="formItemSelectAll">全选</n-button>
      <n-button type="error" @click="clearAll">清空</n-button>
      <n-button type="primary" @click="getGroup">计算</n-button>
    </n-flex>
    <VueDraggable v-model="formItem" :animation="300" target=".drag-target" @end="onDragEnd">
      <n-flex class="drag-target">
        <template v-for="item in formItem" :key="item.type + item.name">
          <n-alert :show-icon="false">
            <n-checkbox
              v-model:checked="item.checked"
              size="large"
              :label="item.name"
              style="margin-bottom: 8px"
            />
            <n-select
              v-model:value="item.skill"
              :options="item.options"
              :style="{ width: item.width + 'px' }"
            />
          </n-alert>
        </template>
      </n-flex>
    </VueDraggable>
    <ShowTable :name="PAGE_KEY" :spots="spotGroup" />
  </n-flex>
</template>
